import React, { useEffect, useRef, useState } from 'react';
import _ from 'lodash';
import PropTypes from 'prop-types';
import * as echarts from 'echarts/core';
import {
    GaugeChart
} from 'echarts/charts';
import {
    CanvasRenderer
} from 'echarts/renderers';
import styles from './Chart.scss';

echarts.use(
    [GaugeChart, CanvasRenderer]
);
Chart.propTypes = {
    data: PropTypes.object
};
export default function Chart(props) {
    const chart = useRef(null);
    const [data, setData] = useState({});
    useEffect(() => {
        setData(props.data);
        const myChart = echarts.init(chart.current);
        const actual_days = _.get(props.data, ['actual_days']) || 0;
        const plan_days = _.get(props.data, ['plan_days']) || 0;
        const option = {
            series: [{
                type: 'gauge',
                center: ['50%', '60%'],
                startAngle: 200,
                endAngle: -20,
                min: 0,
                max: 100,
                splitNumber: 12,
                itemStyle: {
                    normal: {
                        color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [{offset: 0, color: '#0089FF'}, {offset: 1, color: '#72BDFE'}]),
                    }
                },
                progress: {
                    show: true,
                    width: 20,
                    roundCap: actual_days > 0
                },

                pointer: {
                    show: false,
                },
                axisLine: {
                    roundCap: true,
                    lineStyle: {
                        width: 20
                    }
                },
                axisTick: {
                    show: false,
                },
                splitLine: {
                    show: false,
                },
                axisLabel: {
                    show: false
                },
                anchor: {
                    show: false
                },
                title: {
                    show: false
                },
                detail: {
                    valueAnimation: true,
                    width: '60%',
                    lineHeight: 40,
                    height: '15%',
                    borderRadius: 8,
                    offsetCenter: [0, '-15%'],
                    fontSize: 20,
                    fontWeight: 'bolder',
                    formatter: `{plan_days|${actual_days}/${plan_days}}\n{label|出差天数/目标天数}`,
                    rich: {
                        plan_days: {
                            fontSize: 20,
                            lineHeight: 20
                        },
                        label: {
                            fontSize: 14,
                            lineHeight: 26
                        }
                    },
                    color: 'auto'
                },
                data: [{
                    value: actual_days === 0 ? 0.01 : (actual_days / plan_days) * 100,
                }]
            }
            ],
        };
        option && myChart.setOption(option);
    }, [props.data]);
    return (
        <div className={styles.content}>
            <div className={styles.content_box}>
                <div className={styles.chart_warp}>
                    <div className={styles.chart}>
                        <div ref={chart} className={styles.chart_dom} />
                    </div>
                </div>
            </div>
            <div className={`weui-flex ${styles.box}`}>
                <div className={`weui-flex__item ${styles.li}`}>
                    <div className="placeholder">
                        <div>{data.count || 0}</div>
                        <div>总人数</div>
                    </div>
                </div>
                <div className={`weui-flex__item ${styles.li}`}>
                    <div className="placeholder">
                        <div>{data.actual_count || 0}</div>
                        <div>人数</div>
                    </div>
                </div>
                <div className={`weui-flex__item ${styles.li}`}>
                    <div className="placeholder">
                        <div>
                            <div>{Number(_.get(data, ['actual_average']) || 0).toFixed(1)}</div>
                            <div>人均天数</div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    )
}
